<template>
    <div>
        <transition name="fade" mode="out-in">
            <router-view>
            </router-view>
        </transition>
    </div>
</template>

<script>
    const lodash = require('lodash');

    export default {
        name: 'app',
        components: {

        },
        created(){
            this.initApp();
        },
        methods: {
            /**
             * 初始化各种事件
             */
            initApp(){
                this.registerResize();
            },
            //注册窗口大小改变事件
            registerResize(){
                window.addEventListener('resize', lodash.debounce(()=>{
                    console.log("窗口大小改变事件");
                    //发送事件通知
                    this.$bus.emit('windowResize');
                }, 300));
            },
        },
    }
</script>

<style>

    /****路由动画**/
    .fade-enter {
        opacity: 0;
    }

    .fade-enter-active {
        transition: opacity .2s;
    }

    .fade-leave {
        opacity: 1;
    }

    .fade-leave-active {
        transition: opacity .1s;
    }
</style>
